/*
 * @Author: zhang gen yuan
 * @Date: 2021-06-07 16:55:35
 * @Descripttion: 
 */
class Element{
    constructor(type,props,children){
        this.type = type;
        this.props = props;
        this.children = children;
    }
}


function createElement(type,props,children){
    return new Element(type,props,children)
}

function render(DOM){
    let el = document.createElement(DOM.type);

    for (const key in DOM.props) {
        setAttr(el,key,DOM.props[key])
    }

    DOM.children.forEach(child=>{
        child = (child instanceof Element) ? render(child) : document.createTextNode(child);
        el.appendChild(child)
    })

    return el;

}


function renderDOM(el,target){
    target.appendChild(el);
}

function setAttr(node,key,value){
    switch (key) {
        case 'value':
            if(node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea'){
                node.value = value
            }else{
                node.setAttribute(key,value)
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
    
        default:
            node.setAttribute(key,value);
            break;
    }
}
